<template>
  <div>
    <a-table :columns="columns" :data-source="data">
      <span slot="type" slot-scope="type">{{ typeVal(type) }}</span>

      <span slot="isNull" slot-scope="isNull">{{
        isNull == 0 ? "否" : "是"
      }}</span>

      <span slot="select" slot-scope="text, record">{{
        selectVal(text, record)
      }}</span>

      <span slot="action" slot-scope="text, record">
        <a-button type="primary" @click="onUpdate(record)">修改</a-button>
      </span>
    </a-table>

    <ant-form
      @onClose="visible = false"
      :data="formItemData"
      v-if="visible"
      @onSubmit="onSubmit"
    ></ant-form>

    <div class="tips">
      尊敬的面试官您好，由于第一次使用ant desing
      vue这个框架做项目，试题中做的略有粗糙。整体无大碍。
    </div>
  </div>
</template>

<script>
import antForm from "./antForm.vue";
export default {
  components: {
    antForm,
  },
  computed: {
    typeVal() {
      return function (val) {
        if (val == 1) {
          return "单行文本";
        } else if (val == 2) {
          return "日期类型";
        } else if (val == 3) {
          return "单选下拉框";
        }
      };
      // return this.data
    },
  },
  data() {
    return {
      columns: [
        {
          title: "字段名称",
          dataIndex: "name",
        },
        {
          title: "字段类型",
          dataIndex: "type",
          scopedSlots: { customRender: "type" },
        },
        {
          title: "是否必填",
          dataIndex: "isNull",
          scopedSlots: { customRender: "isNull" },
        },
        {
          title: "字段选项",
          dataIndex: "select",
          scopedSlots: { customRender: "select" },
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      data: [
        { key: 0, name: "字段一", type: "1", isNull: 1, select: "" },
        { key: 1, name: "字段二", type: "2", isNull: 0, select: "1" },
        {
          key: 2,
          name: "字段三",
          type: "3",
          isNull: 1,
          select: "选项1,选项2",
        },
      ],
      visible: false,
      formItemData: {},
    };
  },
  methods: {
    onUpdate(val) {
      this.visible = true;
      this.formItemData = val;
    },

    selectVal(text, val) {
      if (!text) {
        return "无";
      }
      if (val.type == 1 || val.type == 3) {
        return text;
      } else if (val.type == 2) {
        if (text == 1) {
          return "年 - 月";
        } else if (text == 2) {
          return "年 - 月 - 日";
        } else if (text == 3) {
          return "年 - 月 - 日 时 - 分";
        }
      }
      // if()
    },

    onSubmit(val) {
      // console.log(this.data[val.key]);
      this.$set(this.data, [val.key], val);
      // this.data[val.key] = val;
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.tips {
  font-size: 16px;
  color: #666;
  font-weight: bold;
}
</style>